<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#divOut{
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="divOut" style="width: 300px; height: 800px; ">
			<h2 style="text-align: center;">注册</h2>
			<br>
			
			用户名：<input type="text" name="fname"  placeholder="请输入用户名" /><br>
			密码：  <input type="password" name="fpassworf"  placeholder="请输入密码" /><br>
			性别：  <input type="radio" id="fgender" name = 'gender' value = '男' requird checked="true"/>男
			<input type="radio" id="fgender" name = 'gender' value = '女' required/>女
			<br>
			学院：<select name="college">
				<option value="1">软件工程学院</option>
				<option value="2">医疗护理学院</option>
				<option value="3">信造学院</option>
				<option value="4">会计学院</option>
			</select>
			<br>
			爱好：<input type="checkbox" name="syumi"  value="syumi1" /><label>篮球</label>
			<input type="checkbox" name="syumi"  value="syumi2" /><label>唱歌</label>
			<input type="checkbox" name="syumi"  value="syumi3" /><label>跳舞</label>
			<br>
			<table border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td >自我介绍:</td>
					<td><textarea rows="20" cols="30"></textarea></td>
				</tr>
			</table>
			<input type="submit" value="提交" /><br>

			<button type="button" onclick="getByName();">按照name的方式查找各个元素</button>
			<button type="button" onclick="getByTag()">按照标签的方式查找各个元素</button>
		</div>
	</body>
<!-- 	3.新制作一个注册页面，要求
	      3.1 要求包含用户名，密码，性别，学院，爱好，自我介绍及提交按钮
	      3.2 包含:输入框，密码框，单选框，多选框，文本域，下拉列表
	      3.3 每个需要提交的标签都要有name值
	      3.4 按照name的方式查找各个元素
	      3.5 按照标签的方式查找各个元素 -->
		  <script>
			  function getByName(){
				var allFname = document.getElementsByName("fname");
				console.log(allFname);
				var allPassword = document.getElementsByName("fpassword");
				console.log(allPassword);
				var allGender = document.getElementsByName("gender");
				console.log(allGender);

				var allName = document.getElementsByName("college");
				console.log(allName);

				var allSyumi = document.getElementsByName("h2");
				console.log(allSyumi);

			  }
			  function getByTag(){
				var allDiv = document.getElementsByTagName("div");
				console.log(allDiv);
				var allInput = document.getElementsByTagName("input");
				console.log(allInput);
				var allOption = document.getElementsByTagName("option");
				console.log(allOption);
				var allButton = document.getElementsByTagName("button");
				console.log(allButton);
			  }
		  </script>
</html>
